<!--
 * @Description: 意见区
-->
<template>
  <div class="opinion-area-wrapper" @mouseenter="getProcessLogs">
    <!-- <EmptyData v-if="!isLoading && list.length === 0&&commentForwardMap.length===0"  /> -->
    <div style="overflow-y: hidden" class="opinion-area-padding">
      <div class="origin-comment-title" v-if="isForward">
        <span class="comment-text">{{ $i18n('collaboration.summary.origin.comment') }}</span>
        <span class="comment-expand" @click="isExpandForward">
          <div v-if="commentForwardExpand">
            <span>{{ this.$i18n('common.retract.label') }}</span>
            <icon-font type="cap-icon-youjiantou-copy" class="expand-icon" />
          </div>
          <div v-else>
            <span>{{ this.$i18n('common.relate.open.label') }}</span>
            <icon-font type="cap-icon-youjiantou2" class="expand-icon" />
          </div>
        </span>
      </div>
      <OriginComment
        v-if="isForward"
        v-show="commentForwardExpand && commentForwardMapLength"
        :commentForwardMap="commentForwardMap"
        :allCommentCountMap="allCommentCountMap"
        :forwardPraiseCountMap="forwardPraiseCountMap" />
      <div
        v-if="isForward && !forwardPageInfo.forWardIsEnd && commentForwardExpand"
        class="opinion-loading">
        <a-spin :spinning="forwardPageInfo.forWardIsLoading || !commentForwardMapLength">
          <a-button
            v-show="commentForwardMapLength"
            :spinning="!forwardPageInfo.forWardIsLoading"
            @click="onAddNextPageHandel(true)"
            class="comment-load-more">
            {{ $i18n('cap4.form.business.loadmore') }}
          </a-button>
        </a-spin>
      </div>
      <div class="origin-comment-title comment-title-margin">
        <span class="comment-text">
          <span>{{ $i18n('common.handle.opinion.label') }}({{ allCommentCountMap[0] }})</span>
          <span
            >{{ $i18n('collaboration.summary.label.praise') }}({{
              relatedAndPraise.praiseToSumNum
            }})</span
          >
        </span>
        <!-- <span class="comment-text"></span> -->
        <a-checkbox @change="onChange">
          {{ $i18n('collaboration.opinion.relatedWithMe') }}({{ relatedAndPraise.relatedToMe }})
        </a-checkbox>
        <div className="comment-header-chakan" class="header-icon-size header-icon-margin">
          <a-tooltip
            mouseEnterDelay="0.2"
            mouseLeaveDelay="0"
            v-show="hideEmptyContent === '1'"
            :title="$i18n('collaboration.opinion.hide.empty.opinion')">
            <icon-font @click="chakanHandel" type="sy-hide"></icon-font>
          </a-tooltip>

          <a-tooltip
            mouseEnterDelay="0.2"
            mouseLeaveDelay="0"
            v-show="hideEmptyContent !== '1'"
            :title="$i18n('collaboration.opinion.show.empty.opinion')">
            <icon-font @click="chakanHandel" type="cap-icon-chakan"></icon-font>
          </a-tooltip>
        </div>
      </div>
      <OpinionAreaItem
        :key="item.id"
        :rootId="item.id"
        :canReply="canReply"
        :data="item"
        :replyItem="replyItem"
        @reply="replyHandel"
        v-for="item in list"
        :processLogs="processLogs" />

      <div v-if="!isEnd" class="opinion-loading">
        <a-spin :spinning="isLoading || !list.length">
          <a-button
            v-show="list.length"
            v-if="!isLoading"
            @click="onAddNextPageHandel(false)"
            class="comment-load-more">
            {{ $i18n('cap4.form.business.loadmore') }}
          </a-button>
        </a-spin>
      </div>
    </div>
    <!-- 解决意见区回复滚动条问题 -->
    <div
      class="replay-extra"
      :class="[this.isVisible ? 'opinion-tab-pane-scroll-container' : '']"></div>
  </div>
</template>
<script>
  // 引入基础数据
  import { useBaseInfoStore } from '@/store/modules/base-info.js';
  const baseInfoStore = useBaseInfoStore();
  import OpinionAreaItem from './opinion-area-item.vue';
  import globalData from '@/plugins/data';
  import EmptyData from '@/components/classic-layout/summary/empty-data';
  import { mapWritableState } from 'pinia';
  import { useSummaryCommentStore } from '@/store/modules/summary/comment.js';
  import api from '@/api';
  import OriginComment from './origin-comment.vue';

  export default {
    name: 'OpinionArea',
    components: { OpinionAreaItem, EmptyData, OriginComment },
    props: {
      replyItem: {
        type: Object
      },
      isLoading: {
        type: Boolean
      },
      list: {
        type: Array
      },
      isEnd: {
        type: Boolean,
        default: false
      },
      commentForwardMap: {
        type: Object,
        default: () => ({})
      },
      allCommentCountMap: {
        type: Object,
        default: () => ({})
      },
      forwardPraiseCountMap: {
        type: Object,
        default: () => ({})
      },
      isVisible: {
        type: Boolean,
        default: false
      },
      relatedAndPraise: {
        type: Object,
        default: () => ({})
      },
      hideEmptyContent: {
        type: String,
        default: '0'
      },
      forwardPageInfo: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        spinning: false,
        commentData: { comments: null, commentTotal: 0 },
        //能否回复
        canReply: false,
        commentForwardExpand: true
      };
    },
    computed: {
      ...mapWritableState(useSummaryCommentStore, ['processLogs']),
      commentForwardMapLength() {
        return Object.keys(this.commentForwardMap).length;
      },
      isForward() {
        const { forwardMembers = [] } = baseInfoStore.baseInfo?.businessData?.summary || {
          forwardMembers: []
        };
        return forwardMembers && forwardMembers.length > 0;
      },
      isShowForwardEmpty() {
        return (
          !this.forwardPageInfo.forWardIsLoading &&
          this.commentForwardMapLength === 0 &&
          this.isForward &&
          this.commentForwardExpand
        );
      }
    },
    mounted() {
      //新建页面不一样
      this.canReply = baseInfoStore.baseInfo.businessData.summary.canReply; // 控制能否回复
    },
    methods: {
      //参数为true代表转发的加载更多，false代表意见的加载更多
      onAddNextPageHandel(isForward) {
        this.$emit('addNextPage', isForward);
      },
      replyHandel(item, rootId) {
        delete item.commentSubmitParams;
        item.commentSubmitParams = { ...item };
        this.$emit('reply', item, rootId);
      },
      commentParams() {
        if (baseInfoStore.baseInfo) {
          var zwIframe = baseInfoStore.baseInfo.zwIframe.mainbody;
          var affair = baseInfoStore.baseInfo.businessData.affair;
          return {
            isHistory: 'false',
            page: '1',
            pageNo: '1',
            pageSize: '500',
            queryType: '0',
            forwardMember: '',
            replyCounts: '1',
            relatedToMe: '0',
            hideEmptyContent: '0',
            searchByKey: '',
            moduleId: zwIframe.moduleId,
            affairId: affair.id,
            moduleType: zwIframe.moduleType,
            offset: this.offset,
            limit: 10
          };
        }
        return {};
      },
      /**
       * @description: 获取所有数据
       * @param {*}
       * @return {*}
       */
      async getData() {
        try {
          this.spinning = true;
        } finally {
          this.spinning = false;
        }
      },
      scrollToComment(submitComment) {
        const el = this.$el.querySelector(`.comment-${submitComment.id}`);
        el &&
          el.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
            inline: 'nearest'
          });
        return el;
      },
      // 获取流程日志
      getProcessLogs() {
        let processId = baseInfoStore.baseInfo?.businessData?.summary?.processId;
        if (!processId) {
          return;
        }
        let some = this.list.filter(item => item.hasWfOperation);
        if (some.length && (Object.keys(this.processLogs)).length !== some.length) {
          api.getProcessLogs(processId).then((res) => {
            console.log('processLogs:', res);
            this.processLogs = res;
          });
        }
      },
      isExpandForward() {
        this.commentForwardExpand = !this.commentForwardExpand;
      },
      onChange(e) {
        if (e.target.checked) {
          this.$emit('tabChange', 2);
        } else {
          this.$emit('tabChange', 1);
        }
      },
      chakanHandel() {
        this.$emit('chakanHandel');
      }
    }
  };
</script>

<style lang="scss">
  .opinion-area-item-replyItem {
    background-color: rgba(229, 241, 255, 0.6) !important;
    border-radius: 2px;
  }
  .opinion-area-item-new {
    animation: newReply 2s linear;
    border-radius: 2px;
    .opinion-area-item-new {
      background: none !important;
    }
  }
  .opinion-area-item {
    transition: background-color 1s ease;
  }
  .opinion-area-wrapper {
    .opinion-area-padding {
      box-sizing: border-box;
      transition: height 2s linear;
    }
    > .empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }
    .opinion-loading {
      text-align: center;
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    > .opinion-area {
      margin-bottom: 0;
    }
    .comment-load-more {
      display: block;
      width: 100%;
    }
    .replay-extra {
      height: 0;
    }

    .comment-empty-setting {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  }

  @keyframes newReply {
    from {
      background-color: rgba(229, 241, 255, 0.6);
    }

    to {
      background-color: #e4e7ed33;
    }
  }
</style>
